<!DOCTYPE html>
<html class=" js boxshadow pointerevents placeholder" lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>flowable流程管理</title>
		<meta name="description" content="Custom Login Form Styling with CSS3">
		<meta name="keywords" content="flowable, h2, springmvc">
		<meta name="author" content="Codrops">
		<link rel="shortcut icon" href="../favicon.ico">
		<!-- <link rel="stylesheet" type="text/css" href="style.css">
		<link rel="stylesheet" type="text/css" href="font-awesome.css">  -->
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
		<style type="text/css">
		     body {font-family: 'Lato', Calibri, Arial, sans-serif;font-weight: 300;font-size: 12px;color: #333;}
			.sucainiu-footer{text-align:center; padding-top:50px;}
			.sucainiu-footer p{line-height:30px;}
			.sucainiu-footer a{color:#06F}
			.content {width: 100%;position: relative;box-sizing: border-box;padding: 5px;margin: 0;max-width:1600px;}
			.content-body{margin-top:10px;width:100%;}
			.mid{margin: 0 auto; text-align: center;}
			.vermid {position: relative;left:50%;top:40%;transform: translate(-50%, -50%);}
			.h100{height:70px;}
			.border{border:1px solid green;background:#007bff}
            .wid100{width:100%;}  
			.left{width:10%;float:left;}
			.right{width:88%;float:left;margin-left:2%;}
			.navigation{position:relative}
			.hide{display:none}
			.show-form{z-index:999; position:absolute; padding: 30px 10px; top:20%;left:30%; width:500px;background:#dee2e6;clear:both;display:none}
			.form-control{display:inline-block;}
			table tr{text-align:center;vertical-align:middle;font-size:12px;}
		</style>
		<script src="jquery-3.6.0.min.js" > </script>
		<script src="jquery.base64.js" > </script>
	</head>
	<body>
		<div class="content">
			<div class="navigation mid  rounded border h100 ">
				<div class="vermid">
					<h5 >flowable流程管理</h5>	
				</div>
			</div>
			<div class="content-body">
				<div class="left">
					<div class="list-group">
						<!-- <a href="#" class="list-group-item active" id="request_holiday_id">请假列表</a> -->
						<!-- <a href="#" class="list-group-item" id="task_management_id">任务管理</a> -->
						<a href="#" class="list-group-item" id="task_unprocessed_id">待处理任务</a>
						<a href="#" class="list-group-item" id="task_processed_id">历史处理任务</a>
					</div>
				</div>
				<div class="right hide" id="task_unprocessed_list">
					<p><button type="button" class="btn btn-default btn-sm text-primary" id="create_request_start">新建任务</button></p>
					<table class="table  table-striped text-primary" id="task_unprocessed_table">
					</table>
				</div>
				<div class="right hide" id="task_processed_list">
					<table class="table  table-striped text-primary" id="task_processed_table">
					</table>
				</div>

			</div>
        </div>
		
		
		<div class="show-form rounded" id="holiday_apply_form">
			<form class="form-horizontal">
				<div class="form-group">
					<label for="request_name" class="col-sm-3 control-label">申请人名称</label>  
					<input type="text" class="form-control col-sm-7" id="request_name"  placeholder="name" />
				</div>
				<div class="form-group">
					<label for="holiday_num" class="col-sm-3 control-label">请假天数</label>
					<input type="text" class="form-control col-sm-7" id="holiday_num" placeholder="请输入请假天数"/>
				</div>
				<div class="form-group text-center">
					<div class="col-sm-offset-2 col-sm-10">
					<button type="button" class="btn btn-sm btn-info" id="holiday_apply_button">申请</button>
					<button type="button" class="btn btn-sm btn-primary" id="holiday_apply_cancel">取消</button>
					</div>
				</div>
			</form>
		</div>

		<div class="show-form rounded" id="holiday_approve_form">
			<form class="form-horizontal">
				<div class="form-group">
					<label for="approve_name" class="col-sm-3 control-label">审批人名称</label>  
					<input type="text" class="form-control col-sm-7" id="approve_name"  placeholder="name" />
				</div>
				<div class="form-group">
					<label for="approve_opt" class="col-sm-3 control-label">审批</label>
					<!-- <input type="text" class="form-control col-sm-7" id="approve_opt" placeholder="请输入请假天数"/> -->
					<select id="approve_opt" class="form-control col-sm-7">
						<option value="Y">同意</option>
						<option value="N">拒绝</option>
					</select>
				</div>
				<div class="form-group text-center">
					<div class="col-sm-offset-2 col-sm-10">
					<button type="button" class="btn btn-sm btn-info" id="holiday_approve_button">申请</button>
					<button type="button" class="btn btn-sm btn-primary" id="holiday_approve_cancel">取消</button>
					</div>
				</div>
			</form>
		</div>


		<script type="text/javascript" >
			$(function(){
				$('.list-group-item').click(function(){
					$(this).addClass('active').siblings().removeClass('active');
					$('.right').hide();
					var id = $(this).attr('id').replace('_id', '_list');
					$('#' + id).show();
				});

				$("#holiday_apply_cancel").click(function(){
					$("#holiday_apply_form").hide();
				});
				$("#holiday_approve_cancel").click(function(){
					$("#holiday_approve_form").hide();
				});
				
				$("#create_request_start").click(function(){
					console.log('新建任务成功')
					$.ajax({
						type : 'get',
						url : 'http://127.0.0.1:7777/holiday/start',
						contentType : 'application/json',
						dataType : 'json',
						success : function(result, status, xhr){
							console.log(result);
							//新建申请
							alert('新建任务成功')
							$("#task_unprocessed_id").click();
						},
						error : function(msg){
							console.log('Form loading error!');
						}
					});
				});
				$("#holiday_apply_button").click(function(){
					console.log('申请')
					if($('#request_name').val() && $('#holiday_num').val()){

					}else{
						alert('请填写信息')
						return;
					}
					$.ajax({
						type : 'get',
						url : 'http://127.0.0.1:7777/holiday/apply?name='+$('#request_name').val()+"&days="+$('#holiday_num').val(),
						contentType : 'application/json',
						dataType : 'json',
						success : function(result, status, xhr){
							console.log(result);
							alert('申请成功')
							$("#holiday_apply_form").hide();
							$("#task_unprocessed_id").click();
						},
						error : function(msg){
							console.log('Form loading error!');
						}
					});
				});
				$("#holiday_approve_button").click(function(){
					console.log('审批')
					if($('#approve_name').val() && $('#approve_opt').val()){

					}else{
						alert('请填写信息')
						return;
					}
					$.ajax({
						type : 'get',
						url : 'http://127.0.0.1:7777/holiday/approve?name='+$('#approve_name').val()+"&approveFlag="+$('#approve_opt').val(),
						contentType : 'application/json',
						dataType : 'json',
						success : function(result, status, xhr){
							console.log(result);
							alert('审批成功')
							$("#holiday_approve_form").hide();
							$("#task_unprocessed_id").click();
						},
						error : function(msg){
							console.log('Form loading error!');
						}
					});
				});
				$("#task_unprocessed_id").click(function(){
					console.log('查询待处理任务')
					$("table#task_unprocessed_table").html("<tr><th>NO.</th><th>申请人</th><th>申请天数</th><th>申请开始时间</th><th>状态</th><th>操作</th></tr>");
					$.ajax({
						type : 'post',
						url : 'http://127.0.0.1:7777/holiday/tasks',
						contentType : 'application/json',
						dataType : 'json',
						success : function(result, status, xhr){
							console.log(result);
							//未处理任务
							number = $("table#task_unprocessed_table tr").length;
							for(let i=0;i<result.length;i++){
								let row = result[i]
								let holidayV0 = row.holidayVo
								let tds = [i+1, holidayV0.name, holidayV0.days, row.createTime,'待'+row.name]
								$("table#task_unprocessed_table").append(addtr(row.id,tds,row.name));
							}
						},
						error : function(msg){
							console.log('Form loading error!');
						}
					});
				});

				$("#task_processed_id").click(function(){
					console.log('查询已处理任务')
					$("table#task_processed_table").html("<tr><th>NO.</th><th>申请人</th><th>申请天数</th><th>审批人</th><th>审批结果</th><th>申请开始时间</th><th>结束时间</th><th>状态</th></tr>");
					$.ajax({
						type : 'get',
						url : 'http://127.0.0.1:7777/holiday/historyTasks',
						contentType : 'application/json',
						dataType : 'json',
						success : function(result, status, xhr){
							console.log(result);
							//历史任务
							number = $("table#task_processed_table tr").length;
							for(let i=0;i<result.length;i++){
								let row = result[i]
								let holidayV0 = row.holidayVo
								let status = ""
								if("Y"===holidayV0.approveFlag){
									status = "同意"
								}else{
									status = "拒绝"
								}
								let tds = [i+1,holidayV0.name, holidayV0.days,holidayV0.approveName,status, row.createTime,row.endTime,'已结束'];
								$("table#task_processed_table").append(addtr(row.id, tds));
							}
						},
						error : function(msg){
							console.log('Form loading error!');
						}
					});
				});

			});

		
        function  addtr(taskid, tds,opt){
			let res =  "<tr taskid="+ taskid +">"
				for(let i=0;i<tds.length;i++){
					res = res + "<td>"+tds[i]+"</td>"
				}
				if(opt){
					res = res + "<td style='color:green;' onclick=showModel('"+opt+"')>"+opt+"</td>"
				}
				res = res + "</tr>";
			return  res;
		}

		function showModel(opt){
			console.log(opt)
			if('申请'===opt){
				$("#holiday_apply_form").show();
			}
			if('审批'===opt){
				$("#holiday_approve_form").show();
			}
		}
		</script>
	</body>
</html>